<div class="deploy-image">
  <p>
    Deploy an existing image from an image stream tag or Docker pull spec.
  </p>
  <form>
    <fieldset ng-disabled="loading">
      <div class="radio">
        <label>
          <input type="radio" ng-model="mode" value="istag">
          Image Stream Tag
        </label>
      </div>
      <fieldset ng-disabled="mode !== 'istag'">
        <istag-select model="istag"></istag-select>
        <div ng-if="mode == 'istag' && istag.namespace && istag.namespace !== 'openshift' && istag.namespace !== project" class="alert alert-warning">
          <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
          Service account <strong>default</strong> will need image pull authority to deploy images
          from <strong>{{istag.namespace}}</strong>. You can grant authority with the command:

          <p>
            <code>oc policy add-role-to-user system:image-puller system:serviceaccount:{{project}}:default -n {{istag.namespace}}</code>
          </p>
        </div>
      </fieldset>
      <div class="radio">
        <label>
          <input type="radio" ng-model="mode" value="dockerImage">
          Image Name
        </label>
      </div>
      <div class="form-group">
        <label for="imageName" class="sr-only">Image name or pull spec</label>
        <div class="input-group">
          <input type="search"
                 id="imageName"
                 ng-model="imageName"
                 required
                 select-on-focus
                 ng-disabled="mode !== 'dockerImage'"
                 placeholder="Image name or pull spec"
                 class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default"
                    type="submit"
                    ng-disabled="!imageName"
                    ng-click="findImage()">
              <i class="fa fa-search" aria-hidden="true"></i>
              <span class="sr-only">Find</span>
            </button>
          </span>
        </div>
      </div>
    </fieldset>
  </form>

  <div ng-if="loading || !import" class="empty-state-message text-muted text-center">
    <span class="fa fa-cube icon-lg hero-icon" aria-hidden="true"></span>
    <div ng-if="!loading" class="h2">Select an image stream tag or enter an image name.</div>
    <div ng-if="loading" class="h2 truncate">Loading image metadata for {{imageName | stripSHA}}...</div>
  </div>
  <div class="row mar-bottom-md" ng-if-start="!loading && import.image">
    <div class="col-sm-12 mar-top-lg mar-bottom-lg">
      <div class="separator"></div>
    </div>
    <div class="col-sm-2 hidden-xs text-right h2">
      <span class="fa fa-cube text-muted" style="font-size: 100px;" aria-hidden="true"></span>
    </div>
    <div class="col-sm-10">
      <div ng-if="runsAsRoot" class="alert alert-warning">
        <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
        Image <strong>{{import.name}}</strong> runs as the
        <strong>root</strong> user which might not be permitted by your cluster
        administrator.
      </div>
      <h2>
        {{app.name}}<span ng-if="import.tag">:{{import.tag}}</span>
        <small>
          <span ng-if="mode === 'dockerImage'">from {{import.result.ref.registry || "Docker Hub"}},</span>
          <relative-timestamp timestamp="import.image.dockerImageMetadata.Created"></relative-timestamp>,
          <span ng-if="import.image.dockerImageMetadata.Size">{{import.image.dockerImageMetadata.Size | humanizeSize}},</span>
          {{import.image.dockerImageLayers.length}} layers
        </small>
      </h2>
      <ul>
        <li ng-if="!import.namespace">Image Stream <strong>{{app.name || "&lt;name&gt;"}}:{{import.tag || 'latest'}}</strong> will track this image.</li>
        <li>This image will be deployed in Deployment Config <strong>{{app.name || "&lt;name&gt;"}}</strong>.</li>
        <li ng-if="ports.length">
          <span ng-if="ports.length === 1">Port</span>
          <span ng-if="ports.length > 1">Ports</span>
          <span ng-repeat="port in ports">
            <span ng-if="!$first && $last">and</span>
            {{port.containerPort}}/{{port.protocol}}<span ng-if="!$last && ports.length > 2">,</span>
          </span>
          will be load balanced by Service <strong>{{app.name || "&lt;name&gt;"}}</strong>.
          <div>Other containers can access this service through the hostname <strong>{{app.name || "&lt;name&gt;"}}</strong>.</div>
        </li>
      </ul>
      <div ng-if="(volumes | hashSize) > 0" class="help-block">
        This image declares volumes and will default to use non-persistent, host-local storage.
        You can add persistent storage later to the deployment config.
      </div>
    </div>
  </div>

  <div class="row" ng-if-end>
    <div class="col-sm-12">
      <form name="form" class="osc-form">
        <div class="form-group">
         <label for="name" class="required">Name</label>
         <div ng-class="{'has-error': form.name.$invalid}">
           <input type="text"
                  required
                  select-on-focus
                  minlength="2"
                  maxlength="24"
                  pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                  ng-model="app.name"
                  id="name"
                  name="name"
                  class="form-control"
                  autocorrect="off"
                  autocapitalize="off"
                  spellcheck="false">
          </div>
          <div class="help-block">Identifies the resources created for this image.</div>
          <div class="has-error" ng-show="form.name.$invalid">
            <div class="help-block" ng-show="form.name.$error.required">
              A name is required.
            </div>
            <div class="help-block" ng-show="form.name.$error.pattern">
              Name must be an alphanumeric (a-z, 0-9) string with a maximum length
              of 24 characters where the first character is a letter (a-z). The '-'
              character is allowed anywhere except the first or last character.
            </div>
            <div class="help-block" ng-show="form.name.$error.minlength">
              Name must have at least 2 characters.
            </div>
          </div>
        </div>
        <osc-form-section
            header="Environment Variables"
            about-title="Environment Variables"
            about="Environment variables are used to configure and pass information to running containers."
            expand="true"
            can-toggle="false"
            class="first-section">
          <key-value-editor
            entries="env"
            key-placeholder="Name"
            key-validator="[A-Za-z_][A-Za-z0-9_]*"
            key-validator-error="A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."
            value-placeholder="Value"></key-value-editor>
        </osc-form-section>

        <label-editor
            labels="labels"
            expand="true"
            can-toggle="false"
            help-text="Each label is applied to each created resource.">
        </label-editor>

        <div class="button-group gutter-top gutter-bottom">
          <button type="submit"
              class="btn btn-primary btn-lg"
              ng-click="create()"
              value=""
              ng-disabled="form.$invalid">Create</button>
          <a class="btn btn-default btn-lg" href="#" back>Cancel</a>
        </div>
      </form>
    </div>
  </div>

  <div ng-if="!loading && import.error" class="empty-state-message text-center">
    <h2>
      <i class="pficon pficon-error-circle-o" aria-hidden="true"></i>
      Could not load image metadata.
    </h2>
    <p>{{import.error | upperFirst}}</p>
  </div>

  <div ng-if="!loading && import && !import.error && !import.image" class="empty-state-message text-center">
    <h2>
      No image metadata found.
    </h2>
    <p>Could not find any images for {{import.name | stripTag}}:{{import.tag}}.</p>
  </div>
</div>
